<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php include("facebook_include.php");?>
<?php
    $userName = getUserName();
    $userId = getUserId(); 
    $userFirstName = getUserFirstName();
    $userZipCode = getUserZipCode();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Share A Walk</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAOMlH-k2dH0DfATeQLlnDdBT_am9jZ89ZBvdRRySiG_MM0e0ZphQzeTaYgOX1XyTwKrc0G_WE8kV6kA" type="text/javascript"></script>
    <script src="mapWalks.js" type="text/javascript"></script>
    <script src="globalFunctions.js" type="text/javascript"></script>
    
    <!-- Ratings -->
    <script type="text/javascript" language="javascript" src="ratings.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/ratings.css" />
    
    <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script src="facebox/facebox.js"></script>
    <link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
    
    <script type="text/javascript" charset="utf-8">
      jQuery.noConflict();
      var $j = jQuery;
      $j(document).ready(function()
      {	
		
        $j(".link").click(function()
        {
          $j(".link").css('background', '#fff');
          $j(this).stop().animate(
          { 
            backgroundColor: '#6d84b4'
          });
					
        });
				
      });
    </script>
    
    <!-- Facebook -->
      <link rel="stylesheet" href="http://static.ak.facebook.com/css/fb_connect.css" type="text/css" />
      <script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
      <script>
          function showfeed(walkName, walkDescription, walkLink, image) {
            FB.ensureInit(function() {
            var actionLinks = [{ "text": "Share A Walk", "href": 'http://apps.facebook.com/shareawalk'}];
            var attachment = {
              'name':walkName,
              'href':walkLink,
              'caption':walkName,
              'description':walkDescription,
                  'media':[{'type':'image','src':image,'href':walkLink}]
              };
              FB.Connect.streamPublish('', attachment,actionLinks);
            });
          }
          
          function eventInvite(walkName, walkDescription, walkLink, location, city){
            FB.Connect.showPermissionDialog("create_event", function(perms) {
                if (perms) {
                    var functionToCall = 'eventForm.php?walkName='+walkName+'&walkDescription='+walkDescription+'&walkLink='+walkLink+'&userName=<?php echo $userName?>&location='+location+'&city='+city ;
                    jQuery.facebox({ ajax:functionToCall});
                }
            });
          }
          
          function printme()
			{			
			  var src = document.getElementById("printImg").value;
			  link = "about:blank";
			  var pw = window.open(link, "_new");
			  pw.document.open();
			  pw.document.write(makepage(src));
			  pw.document.close();
			}
		    
			function makepage(src)
			{
			  // We break the closing script tag in half to prevent
			  // the HTML parser from seeing it as a part of
			  // the *main* page.
              var returnValue =  "<html>\n" +
			    "<head>\n" +
			    "<title>Temporary Printing Window</title>\n" +
			    "<script>\n" +
			    "  function step1() {\n" +
			    "    setTimeout('step2()', 10);\n" +
			    "  }\n" +
			    "  function step2() {\n" +
			    "    window.print();\n" +
			    "    window.close();\n" +
			    "  }\n" +
			    "<\/script>\n" +
			    "<\/head>\n" +
			    "<body onLoad='step1()'>\n" +
			    "<img src='" + src + "'>\n" +
			    "<\/body>\n" +
			    "<\/html>\n";
			  //var returnValue = "10";
			  return returnValue;
			}
      </script>
    <!-- /Facebook -->
    
    <link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />	
    <link rel="stylesheet" type="text/css" href="stylesheets/basic.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/walks.css" />
  </head>

  <body>
    <script type="text/javascript" src="wz_tooltip.js"></script>
    <h1>Share A Walk</h1>
    <div class="motivationInfo">
      <div class="badge" id="badge"></div>	
      <div id="visitsFavourites" class="visitsFavourites">
        <b>Hi <?php echo $userFirstName?>!
      </div>
    </div>
    <div id="header">
      <ul id="primary">
        <li><a href="home.php">Walker Home</a></li>
        <li><span>Walks</span></li>
        <li><a href="profile.php">Walker Profile</a></li>
 				<li><a href="help.php">Help</a></li>
      </ul>
    </div>
    <div id="main">
      <h4 style="margin-top:-0px;margin-left:10px;color:#242424;">Search and explore walks!</h4>
      <div class="createWalk"><a href="createWalk.php">Create a new Walk</a></div>
      <div id="contents">
        <div id="leftnav">
          <!-- Div for the search bar -> top of left column-->	
          <div class="searchArea">
            <input type="text" class="searchWalk" id="searchWalk" value="Search by name/zip/location"/>
            <div class="searchButton">
              <input type="image" src="images/search.jpg" width="29" height="27" name="submitButton" onclick="search(document.getElementById('searchWalk').value);" />
            </div>
            <div class="searchRadioButtons">
              <input type="radio" name="group1" value="all"> All
              <input type="radio" name="group1" value="mywalks" checked> My Walks
              <input type="radio" name="group1" value="friends"> Friends
            </div>
          </div>
          
          <!-- list of WALKS -->
          <div class="list">
            <div class="searchResult">
              <div class="heading">
                <span style="margin-left:5px;">Walks: </span><span id="numOfWalks"> </span>
                <select class="sortBox">
                  <option value="highest">High Rates</option>
                  <option value="recent">Most Recent</option>
                  <option value="favourited">High Favourites</option>
                  <option value="visited">High Visits</option>
                </select>
              </div>
              <div id="searchContent" class="searchContent">
              </div>
            </div>
          </div>
        </div>
        <!-- End of left column -->	
        <!-- Right column of walks page -->
        <div id="right-pane">
          <!-- Container for the map -->
          <div class="map">	
						<div class="mapButtons">
							<button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="share" title="Share this walk with your friends and let them also experience the joys of this walk!!">Share</button>
                            <button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="invite" title="Set up an event to invite your friends for this walk !!">Invite</button>
                            <button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="print" title="Print out the map of this walk!" onClick="printme();">Print Map</button>
							<button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="edit" title="Edit the map of this walk!">Edit</button>
                            <button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="delete" title="Delete the map of this walk!">Delete</button>
                            <input type="hidden" value="" id="printImg"/>
                            <input type="hidden" value="" id="shareImg"/>                            
							
						</div>					
            <!--<div class="walkName">StoneArch Walk</div>-->
            <div id="divMap" class="googleMaps"></div>
          </div>
          <!-- Container for the walk information -->	
          <div class="walkInformation">
            <div class="walkDetails">
              <div class="ratings" id="ratings">Ratings</div>
            </div>
          </div>
          <!-- Container for the description of the walk -->	
          <div class="walkDescription">
            <div class="walkDescriptionHeading"> <h5 style="margin-left:10px;margin-top:5px;margin-bottom:2px;">Description</h5> </div>
            <div id="walkDescriptionContent" class="walkDescriptionContent"></div>
          </div>
          <!-- Container for comments -->
          <div class="walkComments">
            <div class="commentHeading"><span style="margin-left:5px;">Comments</span></div>
            <div class="commentContent"></div>
          </div>	
        </div>
        <!-- End of Right column -->	
        <input type="hidden" id="userID" value="<?php echo $userId; ?>" />
      </div>
    </div>
  </body>
  <!-- Facebook -->
    <script type="text/javascript">
            FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("c55d6c8c312ca6c555b1003c8338bbb2", "xd_receiver.htm"); });
    </script>
  <!-- /Facebook -->
</html>
